<template>
  <div>
    <div class="search">
      <a-form-model
        layout="inline"
        :model="pageQuery.queryParam"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-space>
          <a-button type="primary" @click="add">
            <a-icon type="plus" />
            添加
          </a-button>
          <a-button title="" type="primary" @click="exportExcel">
            <a-icon type="export" />
            execl导出
          </a-button>
        </a-space>
        <div>
          <a-form-model-item
            label="接口名称"
            labelAlign="right"
            prop="interfaceName"
          >
            <a-input v-model="pageQuery.queryParam.interfaceName" />
          </a-form-model-item>
          <a-form-model-item
            label="接口编码"
            labelAlign="right"
            prop="interfaceCode"
          >
            <a-input v-model="pageQuery.queryParam.interfaceCode" />
          </a-form-model-item>
          <a-form-model-item
            label="接口地址"
            labelAlign="right"
            prop="interfaceUrl"
          >
            <a-input v-model="pageQuery.queryParam.interfaceUrl" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="query">查询 </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </div>
    <a-table
      rowKey="id"
      :columns="columns"
      :pagination="pageQuery"
      :data-source="data"
      @change="onChange"
    >
      <span slot="boolean" slot-scope="item">{{ item ? '是' : '否' }}</span>
      <span slot="time" slot-scope="time"> {{ time | formatTimer }}</span>
      <span slot="operation" slot-scope="item">
        <a-space>
          <!-- <a-button @click="detail(menu)"
                  type="">详情</a-button> -->
          <a-button @click="edit(item.id)" type="primary">修改</a-button>
          <a-popconfirm
            title="确定删除？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="del(item.id)"
          >
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
        </a-space>
      </span>
    </a-table>
    <a-modal
      :title="modal.title"
      :visible="modal.visible"
      :confirm-loading="modal.confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="entity"
        :model="form"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item
          label="接口名称"
          labelAlign="right"
          prop="interfaceName"
        >
          <a-input v-model="form.interfaceName" />
        </a-form-model-item>
        <a-form-model-item
          label="接口编码"
          labelAlign="right"
          prop="interfaceCode"
        >
          <a-input v-model="form.interfaceCode" />
        </a-form-model-item>
        <a-form-model-item
          label="接口地址"
          labelAlign="right"
          prop="interfaceUrl"
        >
          <a-input v-model="form.interfaceUrl" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '接口名称',
    dataIndex: 'interfaceName',
    key: 'interfaceName',
    scopedSlots: {}
  },
  {
    title: '接口编码',
    dataIndex: 'interfaceCode',
    key: 'interfaceCode',
    scopedSlots: {}
  },
  {
    title: '接口地址',
    dataIndex: 'interfaceUrl',
    key: 'interfaceUrl',
    scopedSlots: {}
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    scopedSlots: {
      customRender: 'time'
    }
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime',
    scopedSlots: {
      customRender: 'time'
    }
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]
import {
  sysInterfacePage,
  sysInterfaceGet,
  sysInterfaceUpdate,
  sysInterfaceSave,
  sysInterfaceDelete
} from '@a/sysInterface'
import { formatTimer } from '@u/utils'

export default {
  data() {
    return {
      pageQuery: {
        showSizeChanger: true,
        hideOnSinglePage: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        total: 0,
        current: 1,
        defaultCurrent: 1,
        pageSize: 10,
        queryParam: {
          id: null,
          interfaceName: null,
          interfaceCode: null,
          interfaceUrl: null
        }
      },
      modal: {
        title: '',
        visible: false,
        confirmLoading: false
      },
      data: [],
      rules: {},
      columns,
      form: {
        id: null,
        interfaceName: null,
        interfaceCode: null,
        interfaceUrl: null,
        createTime: null,
        updateTime: null,
        version: null,
        deleted: false
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    onChange(pageQuery) {
      this.pageQuery = pageQuery
      this.query()
    },
    query() {
      sysInterfacePage(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.data = res.data.records
          this.pageQuery.total = res.data.total
        }
      })
    },
    add() {
      this.modal.visible = true
      this.modal.title = '新增'
    },
    exportExcel() {
      console.log('导出Excel')
    },
    detail(item) {
      this.form = item
      this.modal.visible = true
      this.modal.title = '详情'
    },
    edit(id) {
      sysInterfaceGet(id).then(res => {
        if (res.code === 200) {
          this.form = res.data
          this.modal.visible = true
          this.modal.title = '编辑'
          console.log(this.modal)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    del(id) {
      sysInterfaceDelete(id).then(res => {
        if (res.code === 200) {
          this.$message.info('删除成功')
          this.query()
        } else {
          this.$message.error(res.msg)
        }
      })
      console.log('删除' + id)
    },
    handleOk() {
      this.$refs.entity.validate(valid => {
        if (valid) {
          if (this.modal.title === '编辑') {
            sysInterfaceUpdate(this.form).then(res => {
              if (res.code === 200) {
                this.$message.info('更新成功')
                this.handleCancel()
                this.query()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            sysInterfaceSave(this.form).then(res => {
              if (res.code === 200) {
                this.$message.info('更新成功')
                this.handleCancel()
                this.query()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
          console.log('modal ok')
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.modal.visible = false
      this.resetForm()
    },
    resetForm() {
      this.form = {
        id: null,
        interfaceName: null,
        interfaceCode: null,
        interfaceUrl: null,
        createTime: null,
        updateTime: null,
        version: null,
        deleted: false
      }
    }
  },
  filters: {
    formatTimer
  }
}
</script>
<style>
.search .ant-form {
  padding: 10px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.avator {
  width: 50px;
  height: 50px;
}
</style>
